<template>
	<view class="container">
		<uni-forms :modelValue="formData" :label-width="80" border :rules="rules" ref="form">
			<uni-forms-item label="收货人:" name="name" >
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" :inputBorder="false"/>
			</uni-forms-item>
			<uni-forms-item label="手机号码:" name="mobile" >
				<uni-easyinput type="text" v-model="formData.mobile" placeholder="请输入电话" :inputBorder="false"/>
			</uni-forms-item>
			<uni-forms-item label="收货地址:" name="adcode">
				<!-- <uni-easyinput type="text" v-model="addressInfo" disabled disableColor="#fff" placeholder="定位地址或小区" :inputBorder="false" >
					<view slot="right" @click="chooseLocation"> <image src="/static/icon_location.png" mode="widthFix" style="width: 24rpx;margin-right: 20rpx;"></image> </view>
				</uni-easyinput> -->
				<uni-data-picker v-model="formData.adcode" placeholder="请选择省市区" popup-title="请选择省市区" :localdata="area" :map="{text:'name',value:'id'}" @change="onchange">
				</uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="详细地址:" name="address">
				<uni-easyinput type="text" v-model="formData.address" placeholder="如道路、门牌号、小区、楼栋号、单元室等" :inputBorder="false"/>
			</uni-forms-item>
			<uni-forms-item name="default" label="设为默认地址" :label-width="120">
				<view class="" style="width: 100%;display: flex;justify-content: flex-end;">
					<switch :checked="formData.default" @change="switchChange" style="transform:scale(0.7)" color="#FE4B20"/>
				</view>
			</uni-forms-item>
		</uni-forms>
		<view class="add_btn">
			<button type="default"class="btn" @click="save">保存</button>
			<button type="default"class="btn btn_del" @click="delAddress" v-if="formData.id && formData.id != ''">删除地址</button>
		</view>
	</view>
</template>

<script>
	import {addressDetail,address,area,deladdress} from '../../../api/api.js'
	export default {
		data() {
			return {
				type:'add',
				area:[],
				formData:{
					id:'',
					name:'',
					mobile:'',
					address:'',
					default:false,
					province:'',
					city:'',
					district:'',
					// citycode:'0371',
					adcode:'',
				},
				rules:{
					name:{
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					mobile:{
						rules: [{
							required: true,
							errorMessage: '请输入电话',
						}]
					},
					address:{
						rules: [{
							required: true,
							errorMessage: '请输入详细地址',
						}]
					},
					adcode:{
						rules: [{
							required: true,
							errorMessage: '请选择省市区',
						}]
					}
				},
			};
		},
		onLoad(options){
			if(options.id){
				this.formData.id = options.id
				this.type = 'edit'
				this.getAddressDetail()
				uni.setNavigationBarTitle({
					title: "修改收货地址"
				})
			}
			this.getArea()
		},
		methods:{
			getArea(){
				area().then(res=>{
					res.data.data.forEach(r=>{
						r.children = r.city
						r.children.forEach(c=>{
							c.children = c.area
						})
					})
					this.area = res.data.data
				})
			},
			switchChange: function (e) {
				this.formData.default = e.detail.value
			},
			onchange(e) {
				const value = e.detail.value
				console.log(value)
				this.formData.province = value[0].text
				this.formData.city = value[1].text
				this.formData.district = value[2].text
			},
			getAddressDetail(){
				addressDetail({id:this.formData.id}).then(res=>{
					let data = res.data.data
					this.formData = {...data,default:data.default == 1}
				})
			},
			save(){
				this.$refs.form.validate().then(res=>{
					console.log('表单数据信息：', res);
					address({...this.formData,default:this.formData.default?'1':'0',type:this.type}).then(res=>{
						console.log(res)
						if(res.data.code == 1){
							uni.navigateBack()
						}
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			delAddress(){
				deladdress({id:this.formData.id}).then(res=>{uni.navigateBack()})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	background-color: #F8F8F8;
	padding: 20rpx 0;
	min-height: calc(100vh - env(safe-area-inset-top));
	font-size: 28rpx;
	/deep/ .uni-forms {
		 padding: 0 44rpx;
		 background-color: #fff;
	}
	.add_btn {
		margin-top: 250rpx;
		height: 100rpx;
		width: 100%;
		.btn {
			width: 88%;
			height: 100%;
			background: #FE4B20;
			border-radius: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
		}
		.btn:after{
			border: none !important;
		}
		.btn_del {
			margin-top: 40rpx;
			background: #E7E7E7;
			color: #656565;
		}
	}
}
/deep/ .is-disabled {
	background-color: #fff !important;
}
/deep/ .input-value {
	border: none;
}
</style>
